<template>
    <div class="descBox" style="height: 100vh;">
        <div v-for="(item,index) in state.attainSysConfigList.sysConfigInfoList" :key="index">
            <vxe-table  v-if="item.stationInfo!=null&&item.stationInfo.arrstation" border="inner"
                :data="item.stationInfo.listInfo">
                <vxe-column v-for="(item, index) in item.stationInfo.arrstation" :field="item.field" :title="item.title"
                    :width="item.width" :params="{ name: item.name }" :key="index">
                </vxe-column>
            </vxe-table>
            <vxe-table  v-if="item.pointInfo!=null&&item.pointInfo.arrpoint" border="inner"
                :data="item.pointInfo.pointList">
                <vxe-column v-for="(item, index) in item.pointInfo.arrpoint" :field="item.field" :title="item.title"
                    :minWidth="item.width!=null?item.width:100" :params="{ name: item.name }" :key="index">
                </vxe-column>
            </vxe-table>
            <vxe-table v-if="item.controlPointInfo!=null&&item.controlPointInfo.arrcontrol" border="inner"
                :data="item.controlPointInfo.controlPointList">
                <vxe-column v-for="(item, index) in item.controlPointInfo.arrcontrol" :field="item.field"
                    :title="item.title" :width="item.width" :params="{ name: item.name }" :key="index">
                </vxe-column>
            </vxe-table>
        </div>
        <div class="print-content" ref="printContent" id="printContent" v-show="false">
            <div class="tophtml page-header" style="width: 100%;">
                <div style="text-align: center;font-weight: 600;font-size: 24px;">
                    安全监控系统配置清单
                </div>
                <div style="display: flex;justify-content: space-between;">
                    <span v-if="state.attainSysConfigList">分站总计: {{state.attainSysConfigList.stationNum}} 测点总计:
                        {{state.attainSysConfigList.pointNum}}</span>
                    <span>打印时间: {{dayjs().format('YYYY/MM/DD hh:mm:ss')}}</span>
                </div>
            </div>
            <!-- 第一个表格 -->
            <div class="table-section" style="width: 100%;"
                v-for="(item,indexF) in state.attainSysConfigList.sysConfigInfoList">
                <table style="width: 100%;" class="print-table"
                    v-if="item.stationInfo!=null&&item.stationInfo.arrstation">
                    <thead style="width: 100%;">
                        <tr style="display: flex;justify-content: space-between;text-align: left;">
                            <th style="flex: 1;" v-for="col in item.stationInfo.arrstation" :key="col.field">
                                {{ col.title }}</th>
                        </tr>
                    </thead>
                    <tbody style="width: 100%;">
                        <tr style="display: flex;justify-content: space-between;"
                            v-for="(row, index) in item.stationInfo.listInfo" :key="index">
                            <td style="flex: 1;" v-for="col in item.stationInfo.arrstation" :key="col.field">
                                {{ row[col.field] }}</td>
                        </tr>
                    </tbody>
                </table>
                <table style="width: 100%;" class="print-table" v-if="item.pointInfo!=null&&item.pointInfo.arrpoint">
                    <thead style="width: 100%;">
                        <tr style="display: flex;justify-content: space-between;text-align: left;">
                            <th style="flex: 1;" v-for="col in item.pointInfo.arrpoint" :key="col.field">
                                {{ col.title }}</th>
                        </tr>
                    </thead>
                    <tbody style="width: 100%;">
                        <tr style="display: flex;justify-content: space-between;"
                            v-for="(row, index) in item.pointInfo.pointList" :key="index">
                            <td style="flex: 1;" v-for="col in item.pointInfo.arrpoint" :key="col.field">
                                {{ row[col.field] }}</td>
                        </tr>
                    </tbody>
                </table>
                <table style="width: 100%;" class="print-table"
                    v-if="item.controlPointInfo!=null&&item.controlPointInfo.arrcontrol">
                    <thead style="width: 100%;">
                        <tr style="display: flex;justify-content: space-between;text-align: left;">
                            <th style="flex: 1;" v-for="col in item.controlPointInfo.arrcontrol" :key="col.field">
                                {{ col.title }}</th>
                        </tr>
                    </thead>
                    <tbody style="width: 100%;">
                        <tr style="display: flex;justify-content: space-between;"
                            v-for="(row, index) in item.controlPointInfo.controlPointList" :key="index">
                            <td style="flex: 1;" v-for="col in item.controlPointInfo.arrcontrol" :key="col.field">
                                {{ row[col.field] }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
<script setup>
    import {
        computed,
        nextTick,
        reactive,
        watchEffect
    } from "vue";
    import axios from "@/utils/request";
    import {
        table_headers
    } from "@/components/commonCom/table_headers";
    import dayjs from "dayjs";
    import useUserStore from "@/store/modules/user";
    import VXETable from 'vxe-table'
    const {
        proxy
    } = getCurrentInstance();
    const userStore = useUserStore();
    const props = defineProps({
        templateTypeValue: {
            type: String,
            default: () => {
                return undefined;
            },
        },
        configFixedComprint: {
            type: String,
            default: () => {
                return undefined;
            },
        },
        formConfig: {
            type: Object,
            default: () => {
                return undefined;
            },
        },
        searchObj: {
            type: Object,
            default: () => {
                return {};
            },
        }
    });
    const emits = defineEmits(['update:templateTypeValue'])
    let state = reactive({
        attainSysConfigList: {},
        formData: {},
        loading:false
    })

    function findLongestArray(arr1, arr2, arr3) {
        if (arr1.length > arr2.length && arr1.length > arr3.length) {
            return arr1.length;
        } else if (arr2.length > arr1.length && arr2.length > arr3.length) {
            return arr2.length;
        } else if (arr3.length > arr1.length && arr3.length > arr2.length) {
            return arr3.length;
        } else {
            return "有多个数组长度相同且最长";
        }
    }

    const getTempList = (data) => {
        state.loading=true
        axios.post("/fixReport/attainSysConfigs", data).then((res) => {
            if(res.code==200){
                if (res.data.sysConfigInfoList.length > 0) {
                    let arr1 = computed(() => res.data.sysConfigInfoList[0].stationInfo != null ? table_headers[
                        res.data.sysConfigInfoList[0].stationInfo.listHeader] : [])
                    let arr2 = computed(() => res.data.sysConfigInfoList[0].pointInfo != null ? table_headers[
                        res.data.sysConfigInfoList[0].pointInfo.listHeader] : [])
                    let arr3 = computed(() => res.data.sysConfigInfoList[0].controlPointInfo != null ?
                        table_headers[res.data.sysConfigInfoList[0].controlPointInfo.listHeader] : [])
                    let targetLength = findLongestArray(arr1.value, arr2.value, arr3.value)
                    // 补齐数组
                    res.data.sysConfigInfoList.forEach(item => {
                        if (item.stationInfo != null) {
                            item.stationInfo.arrstation = table_headers[item.stationInfo.listHeader]
                                .concat(
                                    Array(targetLength - table_headers[item.stationInfo.listHeader]
                                        .length).fill({
                                        title: ''
                                    })
                                )
    
                        }
                        if (item.pointInfo != null) {
                            item.pointInfo.arrpoint = table_headers[item.pointInfo.listHeader].concat(
                                Array(targetLength - table_headers[item.pointInfo.listHeader]
                                    .length).fill({
                                    title: ''
                                })
                            )
                        }
                        if (item.controlPointInfo != null) {
                            item.controlPointInfo.arrcontrol = table_headers[item.controlPointInfo
                                .listHeader].concat(
                                Array(targetLength - table_headers[item.controlPointInfo.listHeader]
                                    .length).fill({
                                    title: ''
                                })
                            )
                        }
                    })
                }
                state.attainSysConfigList = res.data
                // state.loading=false
                emits('configReportChange',true)
            }
        });
    };
    const printContent = ref(null);
    // 打印处理
    const printConfig = ref({
        style: `
    @page {
      size: A4;
      margin: 20mm 10mm;
    }
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    .print-container {
      page-break-inside: avoid;
    }
    .header {
      position: fixed;
      top: 0;
      width: 100%;
      text-align: center;
      padding: 10px 0;
    }
    .footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      // text-align: center;
      padding: 8px 0;
      display: flex;justify-content: space-between;
    }
    .table-content {
      padding-top: 0px;
      margin-bottom: 50px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 0;
    }
    th, td {
      padding: 2px 0;
    }
    th {
    }
    tr {
      border: 1px solid #ddd;
      page-break-inside: avoid;
      page-break-after: auto;
    }
  `,
        beforePrintMethod: ({
            content
        }) => {

            const footer = `
      <div class="footer" style="${state.formData.showBorder?'border:1px solid #ddd':''}">
         <span>${state.formData.titleOne!=null?state.formData.titleOne+':':''} </span>
        <span>${state.formData.titleTwo!=null?state.formData.titleTwo+':':''} </span>
        <span>${state.formData.titleThree!=null?state.formData.titleThree+':':''} </span>
        <span>${state.formData.titleFour!=null?state.formData.titleFour+':':''} </span>
        <span>${state.formData.titleFive!=null?state.formData.titleFive+':':''} </span>
        <span>${state.formData.titleSix!=null?state.formData.titleSix+':':''} </span>
        <span style="margin-right:50px">制表:</span>
      </div>
    `;

            return `
      <div class="print-container">
        <div class="table-content">${printContent.value.innerHTML}</div>
        ${footer}
      </div>
    `;
        }
    });
    const handlePrint = () => {
        // 构建打印页面的HTML
        VXETable.print({
            ...printConfig.value,
        })
    }

    onMounted(() => {});
    watch(() => {
        if (JSON.stringify(props.searchObj) != '{}') {
            getTempList(props.searchObj)
        }
        state.formData = props.formConfig
        if (props.configFixedComprint) {
            handlePrint()
        }
    })
</script>
<style lang="scss" scoped>
    .descBox {
        height: auto;
    }
</style>